import QtQuick 1.0

Rectangle {
    property alias inputWidth: inputContainer.width
    property string inputPlaceholder
    property string inputTextValue: inputElement.text
    property alias resetState: inputContainer.state

    id: inputContainer
    height: 46
    color: "#00000000"

    BorderImage {
        id: inputBorder
        source: "../images/TextInput_default.png"
        anchors.fill: parent
        width: parent.width; height: parent.height
        border.left: 19; border.top: 19
        border.right: 19; border.bottom: 19
        horizontalTileMode: BorderImage.Stretch
        verticalTileMode: BorderImage.Stretch
    }

    TextInput {
        id: inputElement
        font.pixelSize: 18
        font.family: nokiaStandard.name
        text: inputPlaceholder
        color: "#acacac"
        anchors {
            left: parent.left; leftMargin: 20
            right: parent.right; rightMargin: 20
            top: parent.top; topMargin: 12
        }
        activeFocusOnPress: false
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            if (!inputElement.activeFocus) {
                inputElement.forceActiveFocus();
                if(inputElement.text == inputPlaceholder)
                    inputElement.text = "";
                inputElement.openSoftwareInputPanel();
            } else {
                inputElement.focus = false;
                if(inputElement.text == "")
                    inputElement.text = inputPlaceholder;
            }
        }
        onPressAndHold: inputElement.closeSoftwareInputPanel();
    }

    states: [
        State {
            name: "inputFocus"; when: inputElement.activeFocus;
            PropertyChanges { target: inputBorder; source: "../images/TextInput_active.png" }
            PropertyChanges { target: inputElement; color: "#000000" }
        },
        State {
            name: "resetInput"
            PropertyChanges { target: inputElement; text: inputPlaceholder; color: "#acacac"; focus: false }
        }
    ]
}
